<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- Bootstrap CSS -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/x-loading.css" rel="stylesheet">

    <title>Document</title>


    <style>
        html{height:100%;}
        body{height:100%;}
        #app {
            min-width:1400px;
            position: fixed;top:5px;left:5px;bottom:5px;right:5px;padding-top:10px;
            
        }
    </style>
</head>

<body>
    <div id="app" >

        
        <form style="display:flex;flex-wrap: nowrap;" >
            <div class="me-1" >
                <div class="input-group">
                    <div class="input-group-text">工号</div>
                    <input type="text" class="form-control" v-model="query.e_id" @keyup="getPage" style="width:130px;">
                </div>
            </div>

            <div class="me-1" >
                <div class="input-group">
                    <div class="input-group-text">姓名</div>
                    <input type="text" class="form-control" v-model="query.e_name" @keyup="getPage" style="width:130px;">
                </div>
            </div>

            <div class="me-1" >
                <div class="input-group">
                    <div class="input-group-text">工资</div>
                    <input type="number" class="form-control" v-model="query.e_sal_start" style="width:130px;">
                    <div class="input-group-text">至</div>
                    <input type="number" class="form-control" v-model="query.e_sal_end" style="width:130px;">
                </div>
            </div>

            <div class="me-1" >
                <div class="input-group">
                    <div class="input-group-text">入职日期</div>
                    <input type="date" class="form-control" v-model="query.e_date_start" style="width:200px;">
                    <div class="input-group-text">至</div>
                    <input type="date" class="form-control" v-model="query.e_date_end" style="width:200px;">
                </div>
            </div>



            <div >
                <button type="button" class="btn btn-primary" @click="getPage">查询</button>
                <!-- @click 表示点击事件 , getPage是一个函数 -->
            </div>

        </form>

        <button type="button" class="btn btn-primary my-3 me-2" @click="openAdd">新增</button>
        <button type="button" class="btn btn-danger my-3" @click="execMultiDel">删除</button>
        
        <div style="position:absolute;top:120px;bottom:30px;width:100%;border:1px solid #EEEEEE;overflow: auto;padding:5px;">
            <table class="table">
                <thead>
                    <tr>
                        <th>选择</th>
                        <th>工号</th>
                        <th>姓名</th>
                        <th>工资</th>
                        <th>入职日期</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="emp in empList">
                        <td>
                            <!-- 属性前加“：”,则属性值为js表达式 -->
                            <input class="form-check-input" type="checkbox" v-model="eids" :value="emp.e_id" />
                        </td>
                        <td>{{emp.e_id}}</td>
                        <td>{{emp.e_name}}</td>
                        <td>{{emp.e_sal}}</td>
                        <td>{{emp.e_date}}</td>
                        <td>
                            <button type="button" class="btn btn-link" @click="openUpd(emp)">修改</button>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>

        <!-- 新增弹窗 -->
        <x-dialog v-model="visible">
            {{addData}}
            <div class="mb-3">
                <label class="form-label">工号</label>
                <input type="text" class="form-control" v-model="addData.e_id">
            </div>
            <div class="mb-3">
                <label class="form-label">姓名</label>
                <input type="text" class="form-control" v-model="addData.e_name">
            </div>
            <div class="mb-3">
                <label class="form-label">工资</label>
                <input type="number" class="form-control" v-model="addData.e_sal">
            </div>
            <div class="mb-3">
                <label class="form-label">入职日期</label>
                <input type="date" class="form-control" v-model="addData.e_date">
            </div>
            <div style="text-align: right;">
                <button type="button" class="btn btn-primary btn-lg" style="width:200px;" @click="execAdd">提交</button>
            </div>

        </x-dialog>

        <!-- 修改弹窗 -->
        <x-dialog v-model="visible2" title="员工更新" :width="600" :height="400">

            <div class="mb-3">
                <label class="form-label">工号</label>
                <input type="text" class="form-control" v-model="updData.e_id" readonly>
            </div>
            <div class="mb-3">
                <label class="form-label">姓名</label>
                <input type="text" class="form-control" v-model="updData.e_name">
            </div>
            <div class="mb-3">
                <label class="form-label">工资</label>
                <input type="number" class="form-control" v-model="updData.e_sal">
            </div>
            <div class="mb-3">
                <label class="form-label">入职日期</label>
                <input type="date" class="form-control" v-model="updData.e_date">
            </div>
            <div style="text-align: right;">
                <button type="button" class="btn btn-primary btn-lg" style="width:200px;" @click="execUpd">提交</button>
            </div>

        </x-dialog>

    </div>


    <script src="js/bootstrap.bundle.min.js"></script>
    <script src="js/vue.global.js"></script>
    <script src="js/axios.min.js"></script><!-- ajax的封装组件 -->
    <script src="js/x-dialog.js"></script>
    <script src="js/sweetalert2.all.min.js"></script>
    <script src="js/x-loading.js"></script>
    <script src="js/my.js"></script>

    <script>
        //定义vue的配置对象
        const cfg = {
            setup() {//Vue对象的初始化方法

                // ref负责需要整体替换的数据，reactive负责仅仅改变属性的数据(取reactive封装的响应数据不需要 通过 .value)

                const visible = Vue.ref(false)

                const query = Vue.reactive({//查询条件 
                    e_id: '',
                    e_name: '',
                    e_sal_start: '',
                    e_sal_end: '',
                    e_date_start: '',
                    e_date_end: ''
                });

                const empList = Vue.ref([]);

                //定义查询数据的函数
                const getPage = () => {

                    ajax(
                        myAxios.get('/emp',{ params: query }),
                        result =>{
                            empList.value = result.data;
                        }
                    );

                   
                };

                getPage();

                // const curruser = Vue.ref({});
                // const getCurrentUser = ()=>{
                //     ajax(
                //         myAxios.get('/emp/curruser'),
                //         result =>{
                //             curruser.value = result.data;
                //         }
                //     );
                // };

               // getCurrentUser();



                //新增数据
                const addData = Vue.reactive({
                    e_id: '',
                    e_name: '',
                    e_sal: '',
                    e_date: ''
                });

                //打开新增窗口
                const openAdd = () => {

                    //清除窗口数据
                    addData.e_id = '';
                    addData.e_name = '';
                    addData.e_sal = '';
                    addData.e_date = '';


                    visible.value = true;
                };

                const execAdd = () => {
                    Swal.fire({
                        title: '您确认新增该员工吗？',
                        icon: 'question',
                        showCancelButton: true,
                        confirmButtonColor: '#0B5ED7',
                        cancelButtonColor: '#AAAAAA',
                        confirmButtonText: '确认',
                        cancelButtonText: '取消'
                    }).then((result) => {
                        if (result.isConfirmed) {//确认后的逻辑

                            ajax(
                                myAxios.post('/emp', addData),
                                result=>{
                                    getPage();//刷新数据
                                    visible.value = false;//关闭窗口
                                },
                                "员工已被成功新增！"
                            );

                           
                        }
                    })
                };

                //修改

                const visible2 = Vue.ref(false);
                const updData = Vue.reactive({
                    e_id: '',
                    e_name: '',
                    e_sal: '',
                    e_date: ''
                });


                const openUpd = emp => {
                    updData.e_id = emp.e_id;
                    updData.e_name = emp.e_name;
                    updData.e_sal = emp.e_sal;
                    updData.e_date = emp.e_date;
                    visible2.value = true;
                };

                const execUpd = () => {
                    //-----
                    Swal.fire({
                        title: '您确认更新该员工信息吗？',
                        icon: 'question',
                        showCancelButton: true,
                        confirmButtonColor: '#0B5ED7',
                        cancelButtonColor: '#AAAAAA',
                        confirmButtonText: '确认',
                        cancelButtonText: '取消'
                    }).then((result) => {
                        if (result.isConfirmed) {//确认后的逻辑

                            ajax(
                                myAxios.put('/emp', updData),
                                result=>{
                                    getPage();//刷新数据
                                    visible2.value = false;//关闭窗口
                                },
                                "员工已被成功更新！"

                            );

                            
                        }
                    })
                    //----
                };

                //多删除

                const eids = Vue.ref([]);//选择的id数组

                const execMultiDel = () => {

                    if (eids.value.length == 0) {
                        Swal.fire({
                            title: "您没有选择数据！",
                            icon: 'error',
                            showConfirmButton: false,//不显示确认按钮
                            timer: 2000
                        });
                        return;
                    }

                    Swal.fire({
                        title: '您确实要删除选择的员工信息吗？',
                        icon: 'question',
                        showCancelButton: true,
                        confirmButtonColor: '#0B5ED7',
                        cancelButtonColor: '#AAAAAA',
                        confirmButtonText: '确认删除',
                        cancelButtonText: '取消'
                    }).then((result) => {
                        if (result.isConfirmed) {//确认后的逻辑

                            ajax(
                                myAxios.delete('/emp', { data: eids.value }),
                                result=>{
                                    eids.value = [];//清空选择
                                    getPage();//刷新数据
                                },
                                "员工已被成功删除！"
                            );

                        }
                    })


                };



                return {
                    //导出数据，只有导出的才能和页面产生响应式效果
                    empList,
                    query,
                    getPage,
                    visible,
                    addData,
                    execAdd,
                    openAdd,
                    //修改
                    visible2,
                    updData,
                    openUpd,
                    execUpd,
                    //多删除
                    execMultiDel,
                    eids
                };
            }
        };

        //创建Vue对象,并且和页面上id为app的元素进行绑定(挂载),自此id为app的元素将由vue对象进行渲染
        Vue.createApp(cfg).use(XDialog).mount("#app");



    </script>

</body>

</html>